import Designer from './lib';
import schema from './schema';
// import schema from './json_demo/schema';
// import schema from './json_demo/schema1';
// import schema from './json_demo/schema2';
// import schema from './json_demo/schema2.1';
// import schema from './json_demo/schema3';
// import schema from './json_demo/schema3.1';
// import schema from './json_demo/schema4';
// import schema from './json_demo/schema5';
// import schema from './json_demo/schema6';
console.log('schema: ', schema);

// 适配文本节点
function textAdapter(textList) {
  textList.forEach((node) => {
    if (node?.transform?.matrix) {
      const { matrix } = node.transform;
      const scaleX = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
      const scaleY = Math.sqrt(matrix[2] * matrix[2] + matrix[3] * matrix[3]);
      const scale = Math.min(scaleX, scaleY);
      node.fontSize *= scale;
      node.lineHeight = null;
      node.letterSpacing *= scale;
    }
    // 测量文本最大宽度
    const maxWidth = Designer.Text.measureMaxWidth(node);
    // 文本最大宽度大于当前宽度，使用最大宽度
    if (maxWidth > node.width) node.width = maxWidth;
  });
}
// 适配图片节点
function imageAdapter(imageList) {
  const xps = 'https://uat-xps-cdn.xsyx.xyz/';
  imageList.forEach((node) => {
    const { clipping } = node;
    if (clipping) {
      clipping.x = -clipping.x;
      clipping.y = -clipping.y;
    }
    node.src = /http/.test(node.src) ? node.src : `${xps}${node.src}`;
  });
}

// schema 适配
async function schemaAdapter(schema) {
  if (schema.generateTime) return;
  // 获取所有节点
  const list = Designer.Util.nodesTreeToList(schema.nodes);
  // 适配文本节点
  textAdapter(list.filter((node) => node.className === 'Text'));
  // 适配图片节点
  imageAdapter(list.filter((node) => node.className === 'Image'));
}

/**
 * 加载字体
 * @param {string} fontFamily
 * @param {stirng} text
 * @param {*} stage
 */
async function loadFont(fontFamily, text, stage) {
  const fontFamilyQuery = fontFamily.includes('font_') ? fontFamily.slice(5) : fontFamily;
  text = text.replace(/[\n\r'" ]/g, '');
  const font = new FontFace(
    fontFamily,
    `url(https://l-api.jd.com/toolkit/font/slice?fontFamily=${fontFamilyQuery}&text=${text}\\\'\\\"0123456789qwertyuiopasdfghjkl%3B%27%60zxcvbnm,.%2B-*%2F+QWERTYUIOPASDFGHJKLZXCVBNM0&fallbackFontFamily=SourceHanSansSC-Regular)`,
  );
  // console.log(fontFamily, text, font);
  // 等待字体被加载
  await font.load();
  // 添加字体到 document
  document.fonts.add(font);
  // 重绘画布
  stage?.draw();
}

// 获取所有字体节点
const textList = Designer.Util.nodesTreeToList(schema.nodes).filter((node) => node.className === 'Text');
// 等待所有字体加载完毕
const loadFontRes = await Promise.allSettled(textList.map((text) => loadFont(text.fontFamily, text.text)));
// console.log('loadFontRes: ', loadFontRes);

schemaAdapter(schema);

console.time('画布渲染计时：');
const time = performance.now();
// 根据 JSON schema 数据创建画布
const stage = Designer.createStage(schema, document.querySelector('#container'), {
  fps: 144, // 每秒帧数（绘制函数每秒调用最大次数），默认 144
  // width: 1201.89,
  // height: 532.8,
  // autoSize: false,
  scaleRatio: 1.1,
  eventEnabled: true,
  draggable: true,
  scaleable: true,
  selectable: true,
  regionable: true,
  transformable: true,
  recordable: true,
  guidesable: true,
  // selectedNodes: [],
  // depthOperation: false,
  // lastTopGroup: null,
});
window.stage = stage;
// 画布绘制事件
stage.on('draw', function () {
  // document.querySelector('#offset').innerHTML = `X: ${stage.offset.x}, Y: ${stage.offset.y}`;
  document.querySelector('#scale').innerHTML = `${stage.scale}`;
  document.querySelector('#fps').innerHTML = `${stage.frame.frameRate.toFixed(0)}`;
  document.querySelector('#nodesNum').innerHTML = `${stage.allNodes.length}`;
});
// 节点选择事件
stage.on('select', function (nodes) {
  // console.log('nodes: ', nodes);
  const str = `${nodes.map((i) => `${i.name}(🔄: ${i.rotation}, 🔍︎: ${i.scale})`).join(', ')}`;
  document.querySelector('#nodes').innerHTML = !nodes.length ? '无' : str;
});
stage.on('action', function () {
  // console.log('action');
});
stage.on('mousemove', function ({ target }) {
  // console.log(target.name);
});
stage.on('keydown', function ({ e }) {
  // console.log('e: ', e);
  // console.log(target.name);
});
stage.on('window.keydown', function (e) {
  // console.log('e: ', e);
});

stage.adaptive();
document.querySelector('#time').innerHTML = `${performance.now() - time} ms`;
console.timeEnd('画布渲染计时：');
console.log('节点个数: ', stage.allNodes.length);
console.log('stage: ', stage);

const group3 = stage.findOne('.group3');
const text1 = stage.findOne('.text1');

const board = stage.findOne('Board');

// const text3 = stage.findOne('#da107d10-557c-4a2b-8df0-016a98a13b50');

// setTimeout(() => {
//   console.log(stage.toSchema());
// }, 2000);

// 节点移除
// setTimeout(() => {
//   board.remove();
// }, 1000);
// setTimeout(() => {
//   text3.remove();
// }, 2000);
// setTimeout(() => {
//   stage.add(board);
// }, 3000);

// 性能测试
// const image1 = stage.findOne('.image1');
// const images = [...Array(50000)].map(() =>
//   Designer.clone(image1, { x: image1.x + Math.random() * 10000, y: image1.y + Math.random() * 5000 }),
// );
// stage.add(...images);
// console.log('节点个数: ', stage.allNodes.length);
// stage.adaptive();

// group3.on('keydown', function ({ e, currentTarget }) {
//   console.log(currentTarget.name + ' keyDown', e);
// });
// group3.on('transform', function () {
//   console.log('transform');
// });

// 设置层级关系
// const image3 = stage.findOne('#1ab1021e-d5f4-4e87-b6af-c15cea3c474d');
// image3.setZIndex('top');
// setTimeout(() => {
//   image3.setZIndex('bottom');
// }, 1000);
// setTimeout(() => {
//   image3.setZIndex('up');
// }, 2000);
// setTimeout(() => {
//   image3.setZIndex('up');
// }, 3000);
// setTimeout(() => {
//   image3.setZIndex('down');
// }, 4000);
// setTimeout(() => {
//   image3.setZIndex('down');
// }, 5000);

// 节点位置移动（网格坐标）
// const text3 = stage.findOne('#da107d10-557c-4a2b-8df0-016a98a13b50');
// setInterval(() => {
//   text3.move({ x: -1, y: 0 });
// }, 10);
// 移动当前可拖动节点
// setTimeout(() => {
//   stage.moveDraggableNodes({ x: 50 });
// }, 100);

// 动画
// const image3 = stage.findOne('#1ab1021e-d5f4-4e87-b6af-c15cea3c474d');
// let stop = false;
// const anim = new Designer.Animation(function ({ time, frameRate }) {
//   image3.rotate(image3.rotation + 360 / frameRate / 0.5);
//   image3.move({ x: -3 * Math.sin(time / 500), y: -20 * Math.sin(time / 400) });
//   image3.setScale(Math.sin((time * 2 * Math.PI) / 4000) + 1);
//   if (time >= 3000 && !stop) {
//     anim.stop();
//     stop = true;
//     setTimeout(() => anim.start(), 2000);
//   }
// }, stage);
// anim.start();
// 渐变动画
// const text3 = stage.findOne('#da107d10-557c-4a2b-8df0-016a98a13b50');
// const tween = new Designer.Tween({
//   node: text3,
//   scale: 2,
//   color: 'red',
//   shadowColor: 'blue',
//   shadowBlur: 50,
//   rotation: 60,
//   opacity: 0.6,
//   duration: 1,
//   easing: Designer.Easings.EaseIn,
//   infinite: true,
//   yoyo: true,
// });
// tween.play();

// 等待所有图片加载完成
// try {
//   await stage.allImageLoad;
//   console.log('所有图片加载完成');
// } catch (error) {
//   console.log('error: ', error);
// }

// 编组 解组
// setTimeout(() => {
//   const group = Designer.Group.group([
//     stage.findOne('#1ab1021e-d5f4-4e87-b6af-c15cea3c474d'),
//     stage.findOne('#1ab1021e-d5f4-4e87-b6af-c15cea3c4743'),
//   ]);
//   console.log(group);
//   setTimeout(() => {
//     group.unGroup()
//   }, 3000);
// }, 3000);

// 节点导出图片
// const dataURI = stage.findOne('Board').toDataURL();
// console.log(dataURI);
// const image = document.createElement('img');
// image.src = dataURI;
// document.body.appendChild(image);

// 导出图片
// setTimeout(async () => {
//   console.log('data URI：', stage.toDataURL());
//   const blob = await stage.toBlob();
//   const image = document.createElement('img');
//   const url = URL.createObjectURL(blob);
//   image.onload = () => URL.revokeObjectURL(url);
//   image.src = url;
//   document.body.appendChild(image);
// }, 1000);

// setTimeout(() => {
//   console.log(Designer.toSchema(stage));
// }, 1000);

// setTimeout(() => {
//   stage.handleRecord(true);
// }, 1000);
// setTimeout(() => {
//   stage.handleRecord(true);
// }, 2000);
// setTimeout(() => {
//   stage.handleRecord(true);
// }, 3000);
// setTimeout(() => {
//   stage.undo();
// }, 4000);
// setTimeout(() => {
//   stage.undo();
// }, 5000);
// setTimeout(() => {
//   stage.undo();
// }, 6000);
